<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>

	<body>
		<div id="box">
			<select name="sel1" id="sel1">
				<option value="year" class="year">年</option>
			</select>
			<select name="sel2" id="sel2">
				<option value="month" class="moth">月</option>
			</select>
			<select name="sel3" id="sel3">
			</select>
			
		</div>

		<script>
			//生成日期
			function creatDate() {
				//生成1900年-2100年
				var year = new Date().getFullYear()
				var moth = new Date().getMonth()
				var day = new Date().getDay()
				//document.getElementsByClassName('day')[0].innerHTML = day
				//document.getElementsByClassName('day')[0].selectedIndex = 'day'
				 for (var i = (year - 30); i < (year + 30); i++) {//以今年为准，前30年，后30年
				 	document.getElementById('sel1').options.add(new Option(" " + i + " 年", i));
				 	document.getElementById('sel1').value = year
				 }
				//生成1月-12月
				for(var i = 1; i <= 12; i++) {
					document.getElementById('sel2').options.add(new Option(" " + i + "月", i));
					document.getElementById('sel2').value = moth
				}
				//生成1日—31日
				for(var i = 1; i <= 31; i++) {
					document.getElementById('sel3').options.add(new Option(" " + i + "日", i));
					document.getElementById('sel3').value = day
				}
			}
			creatDate();
			//保存某年某月的天数

			//月份点击
			sel2.onclick = function(){
				b();
			}
			var b = (function() {
				var days;
				//天数显示默认值
				return function() {
					//计算天数的显示范围
					//如果是2月
					if(sel2.value == 2) {
						//如果是闰年
						if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0) {
							days = 29;
							//如果是平年
						} else {
							days = 28;
						}
						//如果是第4、6、9、11月
					} else if(sel2.value == 4 || sel2.value == 6 || sel2.value == 9 || sel2.value == 11) {
						days = 30;
					} else {
						days = 31;
					}
					//增加或删除天数
					//如果是28天，则删除29、30、31天(即使他们不存在也不报错)
					if(days == 28) {
						sel3.remove(31);
						sel3.remove(30);
						sel3.remove(29);
					}
					//如果是29天
					if(days == 29) {
						sel3.remove(31);
						sel3.remove(30);
						//如果第29天不存在，则添加第29天
						if(!sel3.options[29]) {
							sel3.add(new Option('29', '29'), undefined)
						}
					}
					//如果是30天
					if(days == 30) {
						sel3.remove(31);
						//如果第29天不存在，则添加第29天
						if(!sel3.options[29]) {
							sel3.add(new Option('29', '29'), undefined)
						}
						//如果第30天不存在，则添加第30天
						if(!sel3.options[30]) {
							sel3.add(new Option('30', '30'), undefined)
						}
					}
					//如果是31天
					if(days == 31) {
						//如果第29天不存在，则添加第29天
						if(!sel3.options[29]) {
							sel3.add(new Option('29', '29'), undefined)
						}
						//如果第30天不存在，则添加第30天
						if(!sel3.options[30]) {
							sel3.add(new Option('30', '30'), undefined)
						}
						//如果第31天不存在，则添加第31天
						if(!sel3.options[31]) {
							sel3.add(new Option('31', '31'), undefined)
						}
					}
				}

			})();
			
		</script>

	</body>

</html>